new Vue({
    el:"#app",
    data:{
        fullscreenLoading: false,
        screenLoading: false,
        strategyContent: {
            id: null,
            title:'',
            uri:'',
            content:[],
            cateId:null
        },
        dialogTypeVisible:false,
        articleTypeList:[],
        typeId:null,
        typeTempName:'',
        typeName:'',
        picType:1,
        adImgUrl: '',
        uploadAdUrl: '',
        adImgUrlSmall:'',
        uploadAdUrlSmall:'',
        adImgUrlOne:'',
        uploadAdUrlOne:'',
        adImgUrlTwo:'',
        uploadAdUrlTwo:'',
        adImgUrlThree:'',
        uploadAdUrlThree:'',
        adImgUrlGroup:[],
        onProcess: false,
        uploadPercent: 0,
        intervalId: null
    },
    mounted:function () {
        var _this = this;
        _this.getStrategyById();
    },
    methods: {
        handleAvatarProcess: function (event, file, fileList) {
            var _this = this;
            _this.showStatus();
            _this.onProcess = true;
        },
        showStatus: function () {
            var _this = this;
            var intervalId = setInterval(function () {
                if (_this.uploadPercent < 100) {
                    _this.uploadPercent += 5;
                }
            }, 100);
        },
        handleAvatarSuccess(res, file) {
            var _this = this;
            _this.uploadAdUrl = res.data.pictureUrl;
            _this.adImgUrl = URL.createObjectURL(file.raw);
        },
        handleAvatarSuccessSmall: function (res, file) {
            var _this = this;
            _this.uploadAdUrlSmall = res.data.pictureUrl;
            _this.adImgUrlSmall = URL.createObjectURL(file.raw);
        },
        handleAvatarSuccessGroupOne: function (res, file) {
            var _this = this;
            _this.uploadAdUrlOne = res.data.pictureUrl;
            _this.adImgUrlOne = URL.createObjectURL(file.raw);
        },
        handleAvatarSuccessGroupTwo: function (res, file) {
            var _this = this;
            _this.uploadAdUrlTwo = res.data.pictureUrl;
            _this.adImgUrlTwo = URL.createObjectURL(file.raw);
        },
        handleAvatarSuccessGroupThree: function (res, file) {
            var _this = this;
            _this.uploadAdUrlThree = res.data.pictureUrl;
            _this.adImgUrlThree = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            var isJPG = file.type === 'image/jpeg';
            var isPNG = file.type === 'image/png';
            var isGIF = file.type === 'image/gif';
            var isLt1M = file.size / 1024 / 1024 < 1;

            if (!isJPG&&!isPNG&&!isGIF) {
                this.$message.error('上传图片格式错误!!');
            }
            if (!isLt1M) {
                this.$message.error('上传图片大小不能超过 1MB!');
            }
            if(this.adImgUrl != '') {
                this.adImgUrl = '';
            }
            this.uploadPercent = 0;
            this.onProcess = false;

            return (isJPG||isPNG||isGIF) && isLt1M;
        },
        getStrategyById:function () {
            var _this = this;
            var id = localStorage.getItem("s_id_");
            if(id == null || id === ''){
                _this.$message.error("浏览器不兼容,请使用高版本浏览器");
            }
            
            axios.get(request_prefix+"/cash/strategy/detail",{
                params: {
                    id: parseInt(id)
                }
            })
                .then(function (res) {
                    if(res.data.code === 0) {
                        _this.typeName = res.data.data.cateName;
                        _this.strategyContent.cateId = res.data.data.cateId;
                        _this.strategyContent.title = res.data.data.title;
                        _this.strategyContent.content = res.data.data.content;
                        if(res.data.data.imgUrlList != null || res.data.data.imgUrlList.length != 0) {
                            _this.strategyContent.url = res.data.data.imgUrlLis;
                            var imageUrlList = res.data.data.imgUrlList;
                            if(imageUrlList.length === 1) {
                                if(imageUrlList[0].type === 'bigPic') {
                                    _this.uploadAdUrl = imageUrlList[0].url;
                                    _this.adImgUrl = _this.uploadAdUrl;
                                    _this.picType = 1;
                                } else if(imageUrlList[0].type === 'smallPic') {
                                    _this.uploadAdUrlSmall = imageUrlList[0].url;
                                    _this.adImgUrlSmall = _this.uploadAdUrlSmall;
                                    _this.picType = 3;
                                }
                            } else {
                                if(imageUrlList[0].type === 'groupPic') {
                                    _this.uploadAdUrlOne = imageUrlList[0].url;
                                    _this.adImgUrlOne = _this.uploadAdUrlOne;
                                    _this.uploadAdUrlTwo = imageUrlList[1].url;
                                    _this.adImgUrlTwo = _this.uploadAdUrlTwo;
                                    _this.uploadAdUrlThree = imageUrlList[2].url;
                                    _this.adImgUrlThree = _this.uploadAdUrlThree;
                                    _this.picType = 2;
                                }
                            }

                        }
                    } else {
                        _this.$message.error("未能获取到数据");
                    }
                })
                .catch(function (res) {
                    _this.$message.error("请求失败，未能获取到数据");
                })
            
        },
        delParagraph:function (item) {
            var _this = this;
            var sData = _this.strategyContent.content;
            for (var i = 0;i < sData.length;i++) {
                if(sData[i] === item) {
                    sData.splice(i,1);
                }
            }
            _this.strategyContent.content = sData;
        }
        ,
        addParagraph:function () {
            var _this = this;
            var newItem = {val:""};
            _this.strategyContent.content.push(newItem);
        },
        saveStrategyInfo:function () {
            var _this = this;
            var id = parseInt(localStorage.getItem("s_id_"));
            if(id == null || id === ''){
                _this.$message.error("浏览器不兼容,请使用高版本浏览器");
            }
            _this.strategyContent.id = id;
            var sDate = _this.strategyContent.content;
            if(_this.strategyContent.title === '') {
                _this.$message.warning("标题不能为空");
                return;
            }
            if(sDate == null || sDate.length == 0) {
                _this.$message.warning("文章不能为空");
                return;
            }
            for (var i = 0;i < sDate.length;i++) {
                sDate[i].itemNo = i + 1;
            }
            _this.strategyContent.content = sDate;

            if(_this.picType === 1) {
                if(_this.uploadAdUrl == '') {
                    _this.$message.error("大图未上传");
                    return;
                }
                var bigImage = {};
                bigImage['type'] = 'bigPic';
                bigImage['url'] = _this.uploadAdUrl;
                _this.strategyContent.url = [];
                _this.strategyContent.url.push(bigImage);
            } else if(_this.picType === 3) {
                if(_this.uploadAdUrlSmall == '') {
                    _this.$message.error("小图未上传");
                    return;
                }
                var smallImage = {};
                smallImage['type'] = 'smallPic';
                smallImage['url'] = _this.uploadAdUrlSmall;
                _this.strategyContent.url = [];
                _this.strategyContent.url.push(smallImage);
            } else {
                if(_this.uploadAdUrlOne == '' || _this.uploadAdUrlTwo == '' || _this.uploadAdUrlThree == '') {
                    _this.$message.error("组图未完全上传");
                    return;
                }
                var imageOne = {'type':'groupPic','url':_this.uploadAdUrlOne};
                var imageTwo = {'type':'groupPic','url':_this.uploadAdUrlTwo};
                var imageThree = {'type':'groupPic','url':_this.uploadAdUrlThree};
                _this.strategyContent.url = [];
                _this.strategyContent.url.push(imageOne);
                _this.strategyContent.url.push(imageTwo);
                _this.strategyContent.url.push(imageThree);
            }
            //ajax提交
            axios.post(request_prefix+"/cash/strategy/update",_this.strategyContent)
                .then(function (res) {
                    if(res.data.code === 0) {
                        _this.$message.success("更新文章成功，2秒后返回列表页");
                        setTimeout(function () {
                            window.location.href = request_prefix+"/cash/strategy/listPage";
                        },2000)
                    } else {
                        _this.$message.error("更新文章失败");
                    }
                })
                .catch(function (res) {
                    _this.$message.error("请求出错，创建文章失败");
                })
        },
        disPlayArticleType:function () {
            var _this = this;
            axios.get(request_prefix + "/cash/strategy/listCate")
                .then(function (res) {
                    if(res.data.code === 0) {
                        _this.articleTypeList = res.data.data;
                    } else {
                        _this.$message.error("为请求到数据");
                    }
                })
                .catch(function (res) {
                    _this.$message.error("请求数据发生错误");
                })
        },
        selectType:function () {
            var _this = this;
            _this.dialogTypeVisible = true;
            _this.disPlayArticleType();

        },
        clearType:function () {
            var _this = this;
            _this.typeName = '';
            _this.strategyContent.cateId = null;
        },
        getItemInfo:function (id,name) {
            var _this = this;
            _this.typeId = id;
            _this.typeTempName = name;
        },
        confirmGetInfo:function () {
            var _this = this;
            _this.strategyContent.cateId = _this.typeId;
            _this.typeName = _this.typeTempName;
            _this.dialogTypeVisible = false;
        },
        toBackList:function () {
            window.location.href = request_prefix+"/cash/strategy/listPage";
        }
    }
});